import React, { Suspense, memo } from 'react'
import { useNavigate, useRoutes } from 'react-router-dom'
import { debounce } from "lodash"

import routes from './router'

const App = memo(function App(props) {
  function btnHandel(){
    console.log('btnHandel----')
  }
  const navigate = useNavigate()
  function goUser(){
    navigate('/user/123?name=lem&age=18')
  }
  
  return (
    <div>
      <div>header   <button onClick={goUser}>goUser</button></div>
      <div>favtor   <button onClick={e =>navigate('/Favtor')}>goFavtor</button></div>
      <button onClick={debounce(btnHandel,3000)}>debounce</button>
      <Suspense fallback="loading">
      <div>
        {
          useRoutes(routes)
        }
      </div>
      </Suspense>
      <div>footer</div>
     
    </div>
  )
})

export default App
